<template>
  <div>
    <div class="table-toolbar">
      <div class="toolbar-left">
        <el-button type="primary" @click="openAddDialog" icon="Plus">新增</el-button>
        <el-badge :value="selectedRows.length" class="toolbar-badge">
          <el-button type="primary" @click="handleDelete" icon="Delete">批量删除</el-button>
        </el-badge>
      </div>
      <div class="toolbar-right">
        <el-tooltip content="刷新" placement="top">
          <el-button circle @click="refreshTable" class="icon-btn">
            <svg viewBox="0 0 1024 1024" width="18" height="18"><path d="M512 128a384 384 0 1 1-271.36 112.64l-60.16-60.16A32 32 0 0 1 224 128h192a32 32 0 0 1 32 32v192a32 32 0 0 1-54.08 22.56l-61.44-61.44A320 320 0 1 0 832 512a32 32 0 0 1 64 0A384 384 0 1 1 512 128z" fill="#409eff"/></svg>
          </el-button>
        </el-tooltip>
        <el-tooltip content="筛选" placement="top">
          <el-button circle @click="filterDialogVisible = true" class="icon-btn">
            <svg viewBox="0 0 1024 1024" width="18" height="18"><path d="M192 224a32 32 0 0 1 0-64h640a32 32 0 0 1 0 64H192zm96 192a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64H288zm128 192a32 32 0 0 1 0-64h192a32 32 0 0 1 0 64H416z" fill="#67c23a"/></svg>
          </el-button>
        </el-tooltip>
        <el-tooltip content="设置" placement="top">
          <el-button circle @click="settingDialogVisible = true" class="icon-btn">
            <svg viewBox="0 0 1024 1024" width="18" height="18"><path d="M512 320a192 192 0 1 0 0 384 192 192 0 0 0 0-384zm0 320a128 128 0 1 1 0-256 128 128 0 0 1 0 256zm384-128a32 32 0 0 1 32 32v64a32 32 0 0 1-32 32h-49.6a320.32 320.32 0 0 1-27.36 66.56l35.04 35.04a32 32 0 0 1 0 45.28l-45.28 45.28a32 32 0 0 1-45.28 0l-35.04-35.04A320.32 320.32 0 0 1 640 881.6V931.2a32 32 0 0 1-32 32h-64a32 32 0 0 1-32-32v-49.6a320.32 320.32 0 0 1-66.56-27.36l-35.04 35.04a32 32 0 0 1-45.28 0l-45.28-45.28a32 32 0 0 1 0-45.28l35.04-35.04A320.32 320.32 0 0 1 142.4 640H92.8a32 32 0 0 1-32-32v-64a32 32 0 0 1 32-32h49.6a320.32 320.32 0 0 1 27.36-66.56l-35.04-35.04a32 32 0 0 1 0-45.28l45.28-45.28a32 32 0 0 1 45.28 0l35.04 35.04A320.32 320.32 0 0 1 384 142.4V92.8a32 32 0 0 1 32-32h64a32 32 0 0 1 32 32v49.6a320.32 320.32 0 0 1 66.56 27.36l35.04-35.04a32 32 0 0 1 45.28 0l45.28 45.28a32 32 0 0 1 0 45.28l-35.04 35.04A320.32 320.32 0 0 1 881.6 384H931.2a32 32 0 0 1 32 32v64a32 32 0 0 1-32 32h-49.6a320.32 320.32 0 0 1-27.36 66.56l35.04 35.04a32 32 0 0 1 0 45.28l-45.28 45.28a32 32 0 0 1-45.28 0l-35.04-35.04A320.32 320.32 0 0 1 640 881.6V931.2a32 32 0 0 1-32 32h-64a32 32 0 0 1-32-32v-49.6a320.32 320.32 0 0 1-66.56-27.36l-35.04 35.04a32 32 0 0 1-45.28 0l-45.28-45.28a32 32 0 0 1 0-45.28l35.04-35.04A320.32 320.32 0 0 1 142.4 640H92.8a32 32 0 0 1-32-32v-64a32 32 0 0 1 32-32h49.6a320.32 320.32 0 0 1 27.36-66.56l-35.04-35.04a32 32 0 0 1 0-45.28l45.28-45.28a32 32 0 0 1 45.28 0l35.04 35.04A320.32 320.32 0 0 1 384 142.4V92.8a32 32 0 0 1 32-32h64a32 32 0 0 1 32 32v49.6a320.32 320.32 0 0 1 66.56 27.36l35.04-35.04a32 32 0 0 1 45.28 0l45.28 45.28a32 32 0 0 1 0 45.28l-35.04 35.04A320.32 320.32 0 0 1 881.6 384H931.2z" fill="#e6a23c"/></svg>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <!-- 多条件查询区 -->
    <div class="search-bar">
     
          <el-select v-model="formfile.Pid" placeholder="请选择商品名称" clearable style="width: 150px; margin-right: 8px;">
            <el-option v-for="item in productNameOptions"  :label="item.productName" :value="item.id" />
          </el-select>
       
      <el-input v-model="formfile.Batch" placeholder="生产批次" clearable style="width: 150px; margin-right: 8px;" />
      <el-input v-model="formfile.ExpirationDate" placeholder="保质期" clearable style="width: 180px; margin-right: 8px;" />
      <el-input v-model="formfile.ProduceCode" placeholder="生产许可证" clearable style="width: 180px; margin-right: 8px;" />
      <el-input v-model="formfile.Manufacturers" placeholder="生产企业" clearable style="width: 180px; margin-right: 8px;" />
      <el-input v-model="formfile.CreateName" placeholder="创建人" clearable style="width: 180px; margin-right: 8px;" />
      <el-input v-model="formfile.CreateTime" placeholder="创建时间" clearable style="width: 180px; margin-right: 8px;" />
      <el-input v-model="formfile.UpdateName" placeholder="修改人" clearable style="width: 180px; margin-right: 8px;" />
      <el-input v-model="formfile.UpdateTime" placeholder="修改时间" clearable style="width: 180px; margin-right: 8px;" />
      <el-button type="primary" @click="gettranceability">查询</el-button>
      <el-button @click="onResetSearch">重置</el-button>
    </div>
    <el-card>
      <el-table :data="tableData" border style="width: 100%" @selection-change="selectedRows = $event">
        
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="batch" label="生产批次" width="120"/>
        <el-table-column prop="expirationDate" label="保质期（天）" />
        <el-table-column prop="produceCode" label="生产许可证号" width="200"/>
        <el-table-column prop="manufacturers" label="生产企业" width="200"/>
        <el-table-column prop="information_Completeness" label="信息完整度">
          <template #default="scope">
            <span :style="{color: getIntegrityColor(scope.row.information_Completeness)}">{{ scope.row.information_Completeness }}%</span>
          </template>
        </el-table-column>
         <el-table-column prop="createName" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" width="200">
          <template #default="scope">
            <span>{{ moment(scope.row.createTime).format('yyyy-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateName" label="修改人" />
        <el-table-column prop="updateTime" label="修改时间"  width="200" >
          <template #default="scope">
            <span>{{ moment(scope.row.updateTime).format('yyyy-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-link type="primary" @click="handleDetail(scope.row.batch)">详情</el-link>
            <el-link type="primary" @click="handleEdit(scope.row)">修改</el-link>
            <el-link type="primary" @click="handleExport(scope.row)">导出溯源码</el-link>
            <el-link type="danger" @click="handleRowDelete(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="page.PageIndex"
      v-model:page-size="page.PgaeSize"
      :page-sizes="[15, 20, 25]"
      :background="true"
      layout="total, slot, sizes, prev, pager, next, jumper"
      :total="page.Count"
    />
  </div>
    </el-card>
    <!-- 筛选弹窗 -->
    <el-dialog v-model="filterDialogVisible" title="筛选" width="400px">
      <el-form :model="filterForm" label-width="100px">
        <el-form-item label="信息完整度">
          <el-select v-model="filterForm.completeness" placeholder="请选择">
            <el-option label="全部" value="" />
            <el-option label=">=100%" value="100" />
            <el-option label="<100%" value="lt100" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="filterDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onFilter">筛选</el-button>
      </template>
    </el-dialog>
    <!-- 设置弹窗 -->
    <el-dialog v-model="settingDialogVisible" title="列设置" width="400px">
      <el-checkbox-group v-model="visibleColumns">
        <el-checkbox v-for="col in allColumns" :key="col.prop" :label="col.prop">{{ col.label }}</el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <el-button @click="settingDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
    <!-- 新建弹窗 -->
    <el-dialog v-model="addDialogVisible" title="新增" width="500px" :close-on-click-modal="false">
      <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
  <el-form-item label="商品名称" prop="pid" required>
          <el-select v-model="ruleForm.pid" placeholder="请选择商品名称">
            <el-option v-for="item in productNameOptions"  :label="item.productName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="生产批次" prop="batch" >
          <el-input v-model="ruleForm.batch" style="width: 200px;"/>
          <el-button @click="getTodayBatch()">生成批次</el-button>
        </el-form-item>
        <el-form-item label="保质期（天）" prop="expirationDate" required>
          <el-input v-model="ruleForm.expirationDate" />
        </el-form-item>
        <el-form-item label="生产许可证号" prop="produceCode" required>
          <el-input v-model="ruleForm.produceCode" />
        </el-form-item>
        <el-form-item label="生产企业" prop="manufacturers" required>
          <el-input v-model="ruleForm.manufacturers" />
        </el-form-item>
        <el-form-item label="封面图" prop="photo" required>
          <el-upload
            class="avatar-uploader"
            action="https://localhost:7235/api/Upfile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
         <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
</el-form>
      
    </el-dialog>
     <el-dialog v-model="addDialogVisibleupdate" title="修改" width="500px" :close-on-click-modal="false">
      <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForms"
    :rules="rules"
    label-width="auto"
  >
  <el-form-item label="商品名称" prop="pid" >
          <el-select v-model="ruleForms.pid" placeholder="请选择商品名称">
            <el-option v-for="item in productNameOptions"  :label="item.productName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="生产批次" prop="batch" >
          <el-input v-model="ruleForms.batch" style="width: 200px;"/>
          <el-button @click="getTodayBatchs()">生成批次</el-button>
        </el-form-item>
        <el-form-item label="保质期（天）" prop="expirationDate" >
          <el-input v-model="ruleForms.expirationDate" />
        </el-form-item>
        <el-form-item label="生产许可证号" prop="produceCode" >
          <el-input v-model="ruleForms.produceCode" />
        </el-form-item>
        <el-form-item label="生产企业" prop="manufacturers" >
          <el-input v-model="ruleForms.manufacturers" />
        </el-form-item>
        <el-form-item label="封面图" prop="photo" >
          <el-upload
            class="avatar-uploader"
            action="https://localhost:7235/api/Upfile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="ruleForms.photo" :src="ruleForms.photo" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
         <el-form-item>
      <el-button type="primary" @click="submitFormupdate(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
</el-form>
      
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive, onMounted } from 'vue'
import { Plus, Delete, Refresh, Filter, Setting } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import moment from 'moment'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
const router=useRouter();
//钩子函数
onMounted(()=>{
  gettranceability();
  getproduct();
 
})
const search = ref('')
//查询数据
const formfile=ref({
  Pid:'',
  Batch:'',
  ExpirationDate:'',
  ProduceCode:'',
  Manufacturers:'',
  CreateName:'',
  UpdateName:'',
  CreateTime:'',
  UpdateTime:''
})
const page=ref({
  PageIndex:1,
  PgaeSize:15,
  Count:0,
  Pcount:0
})
//表格数据
const tableData = ref([])
const gettranceability=()=>{
  axios.get("https://localhost:7235/api/Traceability/GetTraceability",{params:{
    PageIndex:page.value.PageIndex,
    PageSize:page.value.PgaeSize,
    Pid:formfile.value.Pid,
    Batch:formfile.value.Batch,
    ExpirationDate:formfile.value.ExpirationDate,
    ProduceCode:formfile.value.ProduceCode,
    Manufacturers:formfile.value.Manufacturers,
    CreateName:formfile.value.CreateName,
    UpdateName:formfile.value.UpdateName,
    CreateTime:formfile.value.CreateTime,
    UpdateTime:formfile.value.UpdateTime
  }}).then(res=>{
    tableData.value=res.data.datas;
    page.value.Count=res.data.totalCount;
    page.value.Pcount=res.data.totalPage;
  })
}
//查询重置
function onResetSearch() {
  formfile.value.Pid = '',
  formfile.value.Batch = ''
  formfile.value.ExpirationDate = ''
  formfile.value.ProduceCode = ''
  formfile.value.Manufacturers = ''
  formfile.value.CreateName = ''
  formfile.value.UpdateName = ''
  formfile.value.CreateTime = ''
  formfile.value.UpdateTime = ''
  gettranceability()
}
function getIntegrityColor(val: number) {
  if (val === 100) return 'green'
  if (val >= 80) return 'orange'
  return 'red'
}
//添加弹出框
const addDialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  pid: '',
  "batch":'',
  expirationDate: '',
  produceCode: '',
  manufacturers: '',
  photo: '',
})
//生产批次生成
function getTodayBatch() {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  // 生成两位随机数
  const random = String(Math.floor(Math.random() * 100)).padStart(2, '0')
  return ruleForm.batch = `${year}${month}${day}${random}`
}
const locationOptions = ['Home', 'Company', 'School']

const rules = reactive({
  pid: [
    { required: true, message: '请选择商品名称', trigger: 'blur' },
  ],
   batch: [
    { required: true, message: '请输入生产批次', trigger: 'blur' },
  ],
   expirationDate: [
    { required: true, message: '请输入保质期', trigger: 'blur' },
  ],
   produceCode: [
    { required: true, message: '请输入生产许可证', trigger: 'blur' },
  ],
   manufacturers: [
    { required: true, message: '请输入生产企业', trigger: 'blur' },
  ],
   photo: [
    { required: true, message: '请上传图片', trigger: 'blur' },
  ],

})
//打开添加弹出框
function openAddDialog() {
  addDialogVisible.value = true
  Object.assign(ruleForm, { productName: '', batch: '', shelfLife: '', license: '', company: '', coverImg: '' })
}
//保存方法
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post("https://localhost:7235/api/Traceability/AddTraceability",ruleForm).then(res=>{
      if(res.data.code==200){
        ElMessage.success(res.data.msg);
        addDialogVisible.value = false;
        ruleForm.batch="";
        ruleForm.expirationDate="";
        ruleForm.manufacturers="";
        ruleForm.photo="";
        ruleForm.pid="";
        ruleForm.produceCode="";
        gettranceability();
      }
      else{
        ElMessage.error(res.data.msg);
      }
    })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
//商品下拉框
const productNameOptions:any = ref([]);
const getproduct=()=>{
  axios.get("https://localhost:7235/api/Product/GetProduct").then(res=>{
    productNameOptions.value=res.data.data;
  })
}





 // 批量删除逻辑
function handleDelete() {
  if (!selectedRows.value.length) {
    ElMessage.warning('请先选择要删除的项');
    return;
  }
  ElMessageBox.confirm(
    '确认要批量删除选中的商品吗？',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 获取选中id数组
    const ids = selectedRows.value.map(row => row.id);
    axios.put('https://localhost:7235/api/Traceability/PiDelTraceability', { Ids: ids })
      .then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.msg);
          gettranceability(); // 刷新表格
        } else {
          ElMessage.error(res.data.msg);
        }
      });
  }).catch(() => {
    ElMessage.info('已取消');
  });
}
//详情跳转
function handleDetail(batch:any) {
  router.push({path:"/traceDetail",query:{batch:batch}})
}
//修改弹出框
const addDialogVisibleupdate=ref(false);
//反填
function handleEdit(row: any) {
  addDialogVisibleupdate.value = true
  Object.assign(ruleForms, row)
  console.log(row);
  if (row.photo) {
    // 如果是完整URL，直接用，并做编码处理
    if (/^https?:\/\//.test(row.photo)) {
      ruleForms.photo = encodeURI(row.photo)
    } else {
      // 否则拼接完整URL并编码
      const fileName = row.photo.split('/').pop()
      ruleForms.photo = `https://localhost:7235/File/${encodeURIComponent(fileName)}`
    }
  } else {
    ruleForms.photo = ''
  }
}
//修改数据
const ruleForms = reactive({
  id:'',
  pid: '',
  "batch":'',
  expirationDate: '',
  produceCode: '',
  manufacturers: '',
  photo: '',
})
//生产批次
function getTodayBatchs() {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  return ruleForm.batch=`${year}${month}${day}`
}
//修改方法
const submitFormupdate = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.put("https://localhost:7235/api/Traceability/UpdateTraceability",ruleForms).then(res=>{
      if(res.data.code==200){
        ElMessage.success(res.data.msg);
        addDialogVisibleupdate.value = false;
        gettranceability();
      }
      else{
        ElMessage.error(res.data.msg);
      }
    })
    } else {
      console.log('error submit!', fields)
    }
  })
}
function handleExport(row: any) {
  // 导出溯源码逻辑
}
//删除方法
function handleRowDelete(row: any) {
   ElMessageBox.confirm(
    '确认要删除该商品吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
       // 单行删除逻辑
  axios.put("https://localhost:7235/api/Traceability/DelTraceability",{id:row.id}).then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.msg);
    }
    else{
      ElMessage.error(res.data.msg);
    }
  })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
 
}
const selectedRows = ref([])
const filterDialogVisible = ref(false)
const settingDialogVisible = ref(false)
const filterForm = reactive({ completeness: '' })

const visibleColumns = ref([
  'productName', 'batch', 'expirationDate', 'produceCode', 'manufacturers', 'information_Completeness', 'createName', 'createTime', 'updateName', 'updateTime'
])
const allColumns = [
  { prop: 'productName', label: '商品名称' },
  { prop: 'batch', label: '生产批次' },
  { prop: 'expirationDate', label: '保质期（天）' },
  { prop: 'produceCode', label: '生产许可证号' },
  { prop: 'manufacturers', label: '生产企业' },
  { prop: 'information_Completeness', label: '信息完整度' },
  { prop: 'createName', label: '创建人' },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'updateName', label: '修改人' },
  { prop: 'updateTime', label: '修改时间' },
]
function refreshTable() {
  gettranceability()
}


function onFilter() {
  // 筛选逻辑
  filterDialogVisible.value = false
  // 可根据 filterForm.completeness 
}
function filterTable() {
  // 筛选逻辑
}
function settingTable() {
  // 设置逻辑
}
//图片上传

import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // 假设后端返回的是图片完整URL或文件名
  ruleForm.photo = response;
  ruleForms.photo = response;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/png') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.el-link + .el-link {
  margin-left: 8px;
}
.cover-upload-btn {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #222;
  border-radius: 8px;
  font-size: 48px;
  color: #222;
  background: #fff;
  cursor: pointer;
}
.cover-img-box {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #222;
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar-badge {
  margin-left: 8px;
}
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.toolbar-left .el-button[type="primary"] {
  border-radius: 20px;
  background: linear-gradient(90deg, #409eff 0%, #1d8cf8 100%);
  color: #fff;
  border: none;
  font-weight: bold;
  transition: box-shadow 0.2s;
}
.toolbar-left .el-button[type="primary"]:hover {
  box-shadow: 0 2px 8px rgba(64,158,255,0.18);
  background: linear-gradient(90deg, #1d8cf8 0%, #409eff 100%);
}
.toolbar-badge .el-button[type="primary"] {
  background: linear-gradient(90deg, #ff4d4f 0%, #ff7875 100%);
  color: #fff;
  border-radius: 20px;
  border: none;
  font-weight: bold;
  transition: box-shadow 0.2s;
}
.toolbar-badge .el-button[type="primary"]:hover {
  box-shadow: 0 2px 8px rgba(255,77,79,0.18);
  background: linear-gradient(90deg, #ff7875 0%, #ff4d4f 100%);
}
.toolbar-badge .el-badge__content {
  background: #ff4d4f;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
  font-size: 13px;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  right: -16px;
  top: -8px;
  box-shadow: 0 2px 8px rgba(255,77,79,0.18);
}
</style> 